<template>
	<view>
		<view class="head">
			<image :style="{height:headHeight+'rpx'}" class="bac-img" src="../../static/head-bac.png" mode=""></image>
			<image @click="$back()" :style="{ top: safeTop }" class="fanhui-img" src="../../static/fanhuib.png" mode=""></image>
			<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">
				<view @click="alterCurrnetTag(0)" :class="{ 'activate-tag': currnetTag == 0 }">客户列表</view>
				<view @click="alterCurrnetTag(1)" :class="{ 'activate-tag': currnetTag == 1 }" class="tab-l">统计</view>
			</view>
			<view class="search-box" v-if="currnetTag == 0">
				<view class="search">
					<image src="../../static/search.png" mode=""></image>
					<input type="number" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="statistics" v-if="currnetTag == 1">
				<view class="statistics-e">
					<view class="statistics-number">2082</view>
					<view class="statistics-text">客户总数</view>
				</view>
				<view class="statistics-e">
					<view class="statistics-number">36</view>
					<view class="statistics-text">会员客户</view>
				</view>
				<view class="statistics-e">
					<view class="statistics-number">2046</view>
					<view class="statistics-text">普通客户</view>
				</view>
			</view>

			<!-- <u-sticky> -->
			<view class="tabs">
				<u-tabs
					:list="list1"
					lineColor="#4BC264"
					@change="change"
					:current="current"
					:activeStyle="{
						color: '#1C274C',
						fontWeight: 'bold',
						transform: 'scale(0.9)'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(0.8)'
					}"
					itemStyle="padding-left: 10px; padding-right: 10px; height: 42px;"
				></u-tabs>
			</view>
			<!-- </u-sticky> -->
		</view>
		<view :style="{height:headHeight+'rpx'}"></view>
		
		
		<view class="each-box" v-if="currnetTag == 0">
			<view class="each" v-for="(item, index) in 5">
				<view class="each-head">
					<view class="numbering">18846932566</view>
					<view class="icon">
						<image src="../../static/mobile.png" mode=""></image>
						<image src="../../static/mobile.png" mode=""></image>
					</view>
				</view>

				<view class="moneys">
					<view class="moneys-e">
						<view class="minor-text">当前余额</view>
						<view class="num-money">296.00</view>
						<view class="minor-text z-margin-t-24">
							下单次数
							<text>0</text>
						</view>
					</view>
					<view class="moneys-e" style="margin-left: 150rpx">
						<view class="minor-text">开台总时长（不含畅打）</view>
						<view class="num-money">
							0
							<text>分钟</text>
						</view>
						<view class="minor-text z-margin-t-24">
							剩余优惠券
							<text>0</text>
						</view>
					</view>
				</view>
				<u-line length="622rpx" style="margin: auto; margin-top: 3rpx"></u-line>

				<view class="order-each">
					<view class="minor-text">微信支付金额</view>
					<view class="single-range"><text>￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">余额支付金额</view>
					<view class="single-range"><text>￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">历史充值金额</view>
					<view class="single-range"><text>￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">团购核销金额</view>
					<view class="single-range"><text>￥0.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">畅打卡支付金额</view>
					<view class="single-range"><text>￥0.00</text></view>
				</view>

				<view class="money-r z-padding-r-32 z-margin-t-32">
					总计实付金额
					<text class="z-padding-l-8">￥0.00</text>
				</view>
			</view>
		</view>
		
		
		<!-- 统计 -->
		<view class="statistics-box" v-if="currnetTag == 1">
			<view class="date">
				<u-icon name="arrow-left"></u-icon>
				<text>2024 - 3 - 18</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			
			<view class="Daily-active">
				<view class="moneys">
					<view class="moneys-e">
						<view class="minor-text">当前余额</view>
						<view class="num-money">296.00</view>
					</view>
					<view class="moneys-e" style="margin-left: 150rpx">
						<view class="minor-text">当前余额</view>
						<view class="num-money">
							296.00
						</view>
					</view>
				</view>
				<u-line length="622rpx" style="margin: auto; margin-top: 3rpx"></u-line>
				
				<view class="order-each">
					<view class="minor-text">新用户/总消费</view>
					<view class="single-range">2/人<text>￥54.00</text></view>
				</view>
				<view class="order-each">
					<view class="minor-text">老用户/总消费</view>
					<view class="single-range">24/人<text>￥107.00</text></view>
				</view>
			</view>
			
			<view class="title">每天消费人数</view>
			<view class="Number-of-consumers z-margin-t-24 z-padding-b-32" v-if="current == 0">
				<view class="each-consumers" v-for="(item,index) in 24">
					<view class="c-time">00:00</view>
					<view class="c-number">2</view>
				</view>
			</view>
			
			<view class="Number-of-consumers z-margin-t-24 z-padding-b-32" v-if="current == 1">
				<wn-calendar
					ref="calendar"
					:data="[{ date: '2024/4/25', text: '22', type: 2 }]"
					:isBorder="true"
					:isLess="false"
					:colors="['#f3a73f', '#2979ff', '#8f939c', '#18bc37', '#e43d33']"
					:isEn="false"
					format="/"
					@change=""
					@choose="onChoose"
				></wn-calendar>
			</view>
		</view>

		

		<u-popup closeable :round="10" :show="memberShow" mode="center" @close="close" @open="open">
			<view class="popup-box">
				<view class="pop-title">添加会员</view>
				<view style="height: 48rpx; width: 1rpx"></view>

				<view class="each-title">手机号</view>
				<view class="input">
					<input type="number" placeholder="请输入手机号" />
				</view>
				
				<view style="height: 32rpx; width: 1rpx"></view>
				<view class="each-title">赠送金额</view>
				<view class="input">
					<input type="number" placeholder="请输入赠送金额" />
				</view>

				<view class="pop-btn">保存</view>
			</view>
		</u-popup>
		
		<view style="height: 180rpx; width: 1rpx"></view>
		<view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="memberShow = true">添加会员</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuH: this.$menuH || '',
			safeTop: this.$safeTop || 20 + 'px',
			currnetTag: 0,
			list1: [
				{
					name: '授权时间'
				},
				{
					name: '下单次数'
				},
				{
					name: '会员余额'
				},
				{
					name: '开台总时长'
				},
				{
					name: '实付总额'
				}
			],
			current: 0,
			memberShow: false,
			headHeight:'340'
		};
	},

	methods: {
		onChoose(e){
			console.log(e)
		},
		alterCurrnetTag(e) {
			this.currnetTag = e;
			if (e) {
				this.headHeight = 450
				this.list1 = [
					{
						name: '日活跃用户'
					},
					{
						name: '月活跃用户'
					}
				];
			} else {
				this.headHeight = 340
				this.list1 = [
					{
						name: '授权时间'
					},
					{
						name: '下单次数'
					},
					{
						name: '会员余额'
					},
					{
						name: '开台总时长'
					},
					{
						name: '实付总额'
					}
				];
			}
		},
		open() {
			// console.log('open');
		},
		close() {
			this.memberShow = false;
		},
		change(e) {
			this.current = e.index;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}
.head {
	position: relative;
	position: fixed;
	top: 0;
	z-index: 9;
	.bac-img {
		width: 750rpx;
		// height: 340rpx;
		// height: 450rpx;
		position: fixed;
		top: 0;
	}

	.fanhui-img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		margin-left: 32rpx;
		padding-top: 5rpx;
		z-index: 10;
	}
	.head-name {
		display: flex;
		font-weight: 800;
		font-size: 40rpx;
		color: #a4a9b7;
		padding-left: 100rpx;
		position: relative;
		.tab-l {
			padding-left: 64rpx;
		}
		.activate-tag {
			font-weight: 800;
			font-size: 40rpx;
			color: #1c274c;
		}
	}

	.search-box {
		position: relative;
		width: 750rpx;
		margin-top: 27rpx;
		.search {
			width: 622rpx;
			padding: 0 32rpx;
			height: 72rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			display: flex;
			align-items: center;
			image {
				width: 24rpx;
				height: 24rpx;
			}
			input {
				font-size: 26rpx;
				padding-left: 16rpx;
			}
		}
	}
	
	.statistics {
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 686rpx;
		height: 174rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 36rpx;
		.statistics-e {
			.statistics-number {
				font-weight: 500;
				font-size: 40rpx;
				color: #1C274C;
			}
			.statistics-text {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				margin-top: 16rpx;
			}
		}
	}

	.tabs {
		position: relative;
		width: 750rpx;
		margin-top: 10rpx;
	}
}

.each-box {
	.each {
		width: 686rpx;
		// height: 756rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 24rpx;
		padding-bottom: 32rpx;
		.each-head {
			display: flex;
			justify-content: space-between;
			padding: 22rpx 32rpx;
			background-color: #eaebee;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			.numbering {
				font-weight: bold;
				font-size: 26rpx;
				color: #1c274c;
			}
			.icon {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 32rpx;
				}
			}
		}

		.moneys {
			display: flex;
			padding: 32rpx;
			.moneys-e {
				.minor-text {
					font-weight: 500;
					font-size: 24rpx;
					color: #a4a9b7;
					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #1c274c;
						padding-left: 16rpx;
					}
				}
				.num-money {
					font-weight: 500;
					font-size: 48rpx;
					color: #1c274c;
					margin-top: 16rpx;
					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #a4a9b7;
						padding-left: 8rpx;
					}
				}
			}
		}

		.order-each {
			display: flex;
			justify-content: space-between;
			.single-range {
				padding: 32rpx 32rpx 0 0;
				font-weight: 500;
				font-size: 24rpx;
				color: #1c274c;
				text {
					color: #4bc264;
				}
			}
			.minor-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #a4a9b7;
				padding: 32rpx 0 0 32rpx;
			}
		}

		.money-r {
			font-weight: 500;
			font-size: 24rpx;
			color: #a4a9b7;
			text-align: right;
			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #4bc264;
			}
		}
	}
}


// 统计
.statistics-box {
	.date {
		width: 430rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #1C274C;
		text {
			padding: 0 32rpx;
		}
	}
	
	.Daily-active {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 32rpx;
		padding-bottom: 32rpx;
		.moneys {
			display: flex;
			padding: 32rpx;
			.moneys-e {
				.minor-text {
					font-weight: 500;
					font-size: 24rpx;
					color: #a4a9b7;
					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #1c274c;
						padding-left: 16rpx;
					}
				}
				.num-money {
					font-weight: 500;
					font-size: 48rpx;
					color: #1c274c;
					margin-top: 16rpx;
					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #a4a9b7;
						padding-left: 8rpx;
					}
				}
			}
		}
		.order-each {
			display: flex;
			justify-content: space-between;
			.single-range {
				padding: 32rpx 32rpx 0 0;
				font-weight: 500;
				font-size: 24rpx;
				color: #1c274c;
				text {
					color: #4bc264;
				}
			}
			.minor-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #a4a9b7;
				padding: 32rpx 0 0 32rpx;
				text {
					color: #1C274C;
				}
			}
		}
	}
	
	.title {
		font-weight: bold;
		font-size: 30rpx;
		color: #1C274C;
		padding: 40rpx 0 0 32rpx;
	}
	
	.Number-of-consumers {
		width: 630rpx;
		padding: 0 28rpx;
		background: #FFFFFF;
		margin: auto;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.each-consumers {
			text-align: center;
			width: 100rpx;
			margin-top: 32rpx;
			.c-time {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
			}
			.c-number {
				font-weight: bold;
				font-size: 22rpx;
				color: #1C274C;
				margin-top: 8rpx;
			}
		}
	}
}

.btn-box {
	width: 100%;
	position: fixed;
	bottom: 40rpx;
	z-index: 9;
	.PlaceAnOrder-btn {
		width: 686rpx;
		height: 106rpx;
		margin: auto;
		background: #4bc264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 800;
		font-size: 34rpx;
		color: #ffffff;
		line-height: 106rpx;
		text-align: center;
	}
}

.popup-box {
	width: 520rpx;
	background: #ffffff;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	padding: 40rpx;
	.pop-title {
		text-align: center;
		font-weight: 800;
		font-size: 36rpx;
		color: #1c274c;
	}
	.each-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #1c274c;
		padding-bottom: 16rpx;
	}
	.input {
		width: 520rpx;
		background: #f7f8fa;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		input {
			padding: 26rpx 30rpx;
			font-size: 28rpx;
		}
	}
	.pop-btn {
		width: 520rpx;
		height: 90rpx;
		background: #4bc264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
		margin-top: 64rpx;
	}
}
</style>
